<template>
    <div class="mainHistrory">
        <div class="search">
            <div class="searchBox">
                <input v-model="searchValue" @keyup.enter="searchtxt" type="text" placeholder="请输入内容">
                <i class='searchIcon el-icon-search' @click='searchtxt'></i>
                
            </div>
            <a @click='cancelTxt' v-if='cancel' href="javascript:;">取消</a>
        </div>
       
        <ul>
            <li class='js-zc-loadmore'>
                <p class='more' @click='loadMore' v-if="loading">点击加载更多</p>
                <p v-if='loadingOn'>加载中...</p>
                <p v-if="Loaded" class='noMore'></p>
            </li>
            <li :class="item.fromUser.userId === userID ? 'your' : 'mind'" v-for='(item,index) in userMessages' :key="index">
                <p class='time'  v-if="item.type.value!=='event'" > {{timetamp(item.timestamp)}}</p>
                <p class='time' v-if="item.toUser.name!==item.fromUser.name && item.type.value === 'event'">
                    {{item.toUser.name}} 与 {{item.fromUser.name}} {{item.content}}
                </p>
                <p class='time' v-if="item.toUser.name==item.fromUser.name && item.type.value === 'event'">
                    {{item.toUser.name}} {{item.content}}
                </p>
                <div class="user"  v-if="item.type.value !== 'event'">
                    <img :src="item.fromUser.logo" alt="">
                    <cite>
                           <span></span>
                           <span v-text="item.fromUser.name"></span>
                    </cite>
                </div>
    
                <div class="text" v-if="item.type.value!=='event'" >
                    <p v-if="item.type.value!=='event' && item.type.value!=='image' && item.type.value !== 'video' && item.type.value !== 'audio' || item.type.value === 'chat' || item.type.value === 'txt'"  v-html="emoji(item.content)"></p>
                    <img v-image-preview v-if="item.type.value === 'image'" :src="item.content" alt="">
                    <video v-if="item.type.value === 'video'" :src="item.content" controls="controls"></video>
                    <audio v-if="item.type.value === 'audio'" :src="item.content" controls="controls"></audio>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import chat from "../../libs/chat";

export default {
  name: "histrory",

  data() {
    return {
      to: "",
      page: 1,
      limit: 15,
      userID: "",
      head: "",
      loading: false,
      cancel: false,
      searchValue: "",
      userMessages: "",
      defaultMsg: "", //取消搜索默认显示的消息
      Loaded: true,
      loadingOn: false
    };
  },

  methods: {
    //取消搜索
    cancelTxt() {
      this.searchValue = "";
      this.cancel = false;
      this.userMessages = this.defaultMsg;
      this.Loaded = false;
      this.loading = true;
      $(".searchBox").css("width", "100%");
    },

    //搜索历史记录
    searchtxt() {
      let _self = this;
      console.log(this.searchValue);

      if (this.searchValue !== "") {
        this.cancel = true;
        $(".searchBox").css("width", "87%");
        chat.history(
          _self.userID,
          this.page,
          this.limit,
          "",
          this.searchValue,
          data => {
            console.log(data);
            if (data.code === 200) {
              if (data.data.length === 0) {
                this.userMessages = "";
                this.loading = false;
                this.Loaded = true;
              } else {
                this.loading = false;
                this.Loaded = false;
                this.loadingOn = false;
                this.userMessages = data.data.reverse();
              }
            } else {
              _self.loading = false;
              _self.Loaded = true;
              this.$message({
                message: "请选择一个用户",
                type: "warning"
              });
            }
          }
        );
      } else {
        this.cancel = false;
        this.userMessages = this.defaultMsg;
        this.$message.error("搜索内容不能为空");
      }
    },

    hasHistroy(id, res) {
      let _self = this;
      this.userID = id;
      if (res.code === 200) {
        let data = res.data;
        if (data.length === 0) {
          _self.userMessages = "";
          _self.loading = false;
          _self.Loaded = true;
        } else {
          let newData = data.reverse();
          _self.loading = true;
          _self.Loaded = false;
          _self.userMessages = newData;
          _self.defaultMsg = newData; //得到默认显示的消息
        }
      } else {
        _self.loading = false;
        _self.Loaded = true;
      }
    },
    loadMore() {
      let _self = this;
      _self.page += 1;
      _self.loadingOn = true;
      _self.loading = false;
      chat.history(_self.userID, this.page, this.limit, "", "", function(res) {
        let data = res.data;
        if (res.code === 200) {
          if (data.length === 0) {
            _self.loading = false;
            _self.Loaded = true;
            _self.loadingOn = false;
          } else {
            let newData = data;
            for (let i = 0; i < newData.length; i++) {
              _self.userMessages.unshift(newData[i]);
            }
            _self.loadingOn = false;
            _self.Loaded = false;
            _self.loading = true;
          }
        } else {
          _self.loading = false;
          _self.loadingOn = false;
          _self.Loaded = true;
        }
      });
    },

    //监听search
    Monitor() {
      if (this.searchValue == "") {
        this.userMessages = this.defaultMsg;
      }
    },

    //将时间戳转换为时间
    timetamp(timestamp) {
      return chat.formatDate(timestamp, "yyyy-MM-dd hh:mm:ss");
    }
  },

  mounted() {
    chat.addValidateListener(json => {
      this.Monitor();
    });

    var height = $(window).height();
    $(".mainHistrory ul").css("height", height - 185);
    $(window).resize(() => {
      height = $(window).height();
      $(".mainHistrory ul").css("height", height - 185);
    });
  }
};
</script>

<style scoped>
ul {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
}

.mainHistrory .js-zc-loadmore {
  margin: 1rem 0;
}

.search {
  padding: 1rem;
  display: flex;
  border-bottom: 1px solid #e6e7ee;
}

.js-zc-loadmore .noMore {
  width: 25rem;
  height: 3rem;
  padding: 0;
  background: url("../../assets/icon/no_more.png") center center no-repeat;
  background-size: 13rem;
  position: absolute;
  left: -1rem;
}

.searchBox {
  position: relative;
  width: 100%;
}

.search input[type="text"] {
  width: 100%;
  padding: 0.5rem 0;
  text-indent: 1em;
  outline: none;
  border-radius: 5px;
  border: 1px solid #dee5e6;
}

.search a {
  line-height: 2rem;
  width: 13%;
  text-align: center;
  color: #b6b6b6;
  font-size: 14px;
}

.search .searchIcon {
  position: absolute;
  top: 0.5rem;
  right: 0.7rem;
}

.js-zc-loadmore p {
  font-size: 12px;
  text-align: center;
  color: #bfbfbf;
  display: inline-block;
  margin: 0 auto;
  padding: 2px 15px;
  border-radius: 4px;
}

.mainHistrory ul {
  overflow-y: auto;
}
.text video {
  width: 14rem;
}

.mainHistrory .text p {
  text-align: left;
  line-height: 1.3rem;
  color: #333;
}

.mainHistrory .your .text p {
  color: #fff;
}

.mainHistrory .text img {
  padding: 0;
}

.mainHistrory ul::-webkit-scrollbar {
  width: 2px;
  display: none;
}

.mainHistrory .mind > p,
.your > p {
  line-height: 1rem;
  padding: 0.15rem;
  color: #ced0d0;
  margin: 1rem auto;
  width: 10rem;
  border-radius: 4px;
  top: 1rem;
  font-size: 12px;
  letter-spacing: 0.05rem;
  text-align: center;
}

.js-zc-loadmore .more{
  cursor: pointer;
}

.mainHistrory ul::-webkit-scrollbar-track-piece {
  background-color: #fff;
} /* 滚动条的内层滑轨背景颜色 */

.mainHistrory ul::-webkit-scrollbar-track {
  background-color: #fff;
} /* 滚动条的外层滑轨背景颜色 */

.mainHistrory ul::-webkit-scrollbar-thumb {
  background-color: #d4d8e2;
} /* 滚动条的内层滑块颜色 */

.mainHistrory ul::-webkit-scrollbar-button {
  background-color: #fff;
  display: none;
} /* 滑轨两头的监听按钮颜色 */

.mainHistrory ul li {
  margin: 0;
  padding: 0;
  height: initial;
}

.mainHistrory .your cite span:last-child {
  margin-right: 0.7rem;
}

.mainHistrory .your cite span:first-child {
  float: none;
  margin: 0;
}

.mainHistrory.text p img {
  width: 1.5rem;
  margin: 0;
  padding: 0;
}

.mainHistrory .mine {
  text-align: right;
  padding-left: 0;
}

.mainHistrory .user {
  left: auto;
  right: 3px;
  height: 1.3rem;
  line-height: 2.5rem;
  position: relative;
}

.mainHistrory {
  width: 100%;
  margin: 0;
}

.mainHistrory .text {
  margin: 1rem 1.3rem 0 0;
  display: inline-block;
  background: #62bada;
  padding: 0.5rem;
  max-width: 69%;
  border-radius: 3px;
  color: #fff;
  line-height: 1rem;
  word-break: break-all;
  overflow: hidden;
}

.mainHistrory .your .text {
  margin: .5rem 0 0 2.1rem;
}

.mainHistrory .user img {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 100%;
}

.mainHistrory .user cite {
  left: auto;
  right: 60px;
  text-align: right;
  position: absolute;
  /* top: 3rem; */
  width: 39%;
  line-height: 24px;
  font-size: 12px;
  white-space: nowrap;
  color: #999;
  font-style: normal;
}

.mainHistrory .time {
  line-height: 1rem;
  padding: 0.5rem;
  color: #ced0d0;
  margin: 1rem auto;
  width: 80%;
  border-radius: 4px;
  top: 1rem;
  font-size: 12px;
  /* letter-spacing: .05rem; */
  color: #8b898f;
  text-align: center;
}

.mainHistrory .mine .user {
  text-align: right;
  padding-right: 1rem;
}

.mainHistrory .your cite {
  top: 0.2rem;
  left: 4rem;
  width: 17rem;
}

.mainHistrory .mine cite {
  right: 55px;
  top: 0.2rem;
}

.mainHistrory .user cite i {
  margin-right: 1rem;
}

.mainHistrory .your cite {
  left: 37px;
  right: auto;
  text-align: left;
}

.mainHistrory .your {
  /* padding-left: 1.5rem; */
  display: flex;
  flex-wrap: wrap;
}

.mainHistrory .mind .text {
    margin: .5rem 3.5rem 0 0;
    display: block;
    padding: 0.5rem;
    background: #f3f4f5;
    border-radius: 3px;
    color: #333;
    display: inline-block;
    background: #f3f4f5;
    font-size: 12px;
    line-height: 1.7rem;
    max-width: 52%;
    word-break: break-all;
}

.mainHistrory .your .user {
  text-align: left;
  width: 100%;
  padding: 0;
}

.mainHistrory ul {
  overflow-y: auto;
  overflow-x: hidden;
  padding-left: 1rem;
}
</style>
